<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2024/11/18
  Time: 21:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="static/css/product.css">
    <script src="static/js/vue-2.6.10.js" ></script>
    <script src="static/js/axios.min.js"></script>
</head>
<body>
<div class="product-list" id="app">

    <div class="product-item" v-for="product in product_list">
        <div class="product-img">
            <img :src="imagesUrl(product.picture)">
        </div>
        <div class="product-info">
            <div>品名：<span>{{product.name}}</span></div>
            <div>原价：<del>{{product.marker_price}}</del>元</div>
            <div>现价：<span>{{product.sell_price}}</span>元</div>
            <div>简介：<span>{{product.description}}</span></div>
            <div><a href="#">查看详细内容</a></div>
        </div>
    </div>
    <img :src="static/img/productImages/1195000845820.jpg">
</div>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            product_list: [{"name": "商品1"},{"name": "商品2"},{"name": "商品3"},{"name": "商品4"}]
        },
        created(){
            //异步请求：
            axios.get("productList.do").then(function(result){
                // 使用获取到的数据替换商品列表
                vue.product_list = result.data
            });
        },
        methods: {
            imagesUrl: function(img_name){
                return "static/img/productImages/"+img_name;
            }
        }
    });
</script>
</body>
</html>
